Normalized Data
背景
メンバーから質問: vuex-ormには、どういう時に使うのだろう
使う場合:
1. Frontendに複雑Dataを管理してる時、例えば、A type Data has B type Data and C type Data, B has many C too.
2. 関連 Data を表示する、また同じ画面に更新する時
3. Schema(Modal) Driven Develop
Vuex ORM is a plugin for Vuex to enable Object-Relational Mapping access to the Vuex Store.
Vuex-ormの力を使いたいなら、まず Normalized Data 理解しないといけないです。
Normalized Data 概念が Redux から
簡単説明:
Nested Data
一般Dataがほぼ Nested Data、例
code:Nest Data
{
"id": "123",
"author": {
"id": "1",
"name": "Paul"
},
"title": "My awesome blog post",
"comments": [
{
"id": "324",
"commenter": {
"id": "2",
"name": "Nicole"
}
},
{
"id": "325",
"commenter": {
"id": "1",
"name": "Paul"
}
}
]
}
Nested DataはJavaScriptに利用にくいです。
理由:
複数の Model を混雑してる、author: User, comment: Comment
ObjectとArray が混雑してる、comments: [Comment]
Dataが重複可能性があります、authorとcommenterには同じModal(User)です。
Normalized Data
code:Normalized Data
{
result: "123",
entities: {
"articles": {
"123": {
id: "123",
author: "1",
title: "My awesome blog post",
}
},
"users": {
"1": { "id": "1", "name": "Paul" },
"2": { "id": "2", "name": "Nicole" }
},
"comments": {
"324": { id: "324", "commenter": "2" }
"325": { id: "325", "commenter": "1" }
}
}
}
Nested Dataの課題を解決
複数の Model を混雑してる、author: User, comment: Comment
単一Modal
articles[id]: Article
users[id]: User
commnets[id]: Comment
ObjectとArray が混雑してる、comments: [Comment]
Dataが必ず、Array中に Id だけ
Dataが重複可能性があります、authorとcommenterには同じModal(User)です。
重複しない
umamichi.icon Normalized Data の説明ありがとうございます、理解できました。
DBで扱うデータの構造と似ていますね、バックエンドではなくフロントエンドのみでこのようなデータを管理するときが使い所、ということですね
TODO:
Created by tj.icon